/*
 * @Author: xiaosihan 
 * @Date: 2024-01-20 07:41:26 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-20 22:19:30
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./state.module.less";
import homeStore from "@views/home/homeStore";
import config from "@views/home/config/config";

interface Iprops {
    children?: ReactNode
}

// 状态说明
export default function State(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [state, setState] = useState(homeStore.state);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setState(homeStore.state);
    }, { delay: 10 }), []);

    return (
        <div className={styles.state} >
            {
                state === "distribution" && config.windowType.map((w, i) => {
                    return (
                        <span className={styles.state_item} key={i} >
                            {w.name}
                            <span
                                style={{ backgroundColor: w.color }}
                                className={styles.state_item_color}
                            ></span>
                        </span>
                    );
                })
            }

            {
                state === "install" && config.installState.map((w, i) => {
                    return (
                        <span className={styles.state_item} key={i}>
                            {w.installState}
                            <span
                                style={{ backgroundColor: w.installColor }}
                                className={styles.state_item_color}
                            ></span>
                        </span>
                    );
                })
            }

        </div>
    );

}